Modal Dialog এবং Confirmation Boxes ব্যবহারকারীদের সঙ্গে ইন্টারঅ্যাকশন করার জন্য গুরুত্বপূর্ণ ইউজার ইন্টারফেস উপাদান। ExtJS এ এগুলি খুব সহজে তৈরি করা যায়। Modal Dialog ব্যবহারকারীকে অন্যান্য অ্যাপ্লিকেশনের কার্যক্রম থেকে বিচ্ছিন্ন করে একটি গুরুত্বপূর্ণ মেসেজ বা ফর্ম প্রদর্শন করতে ব্যবহৃত হয়, যেখানে ব্যবহারকারীকে একে একে প্রতিক্রিয়া জানাতে হয়। Confirmation Boxes সাধারণত ব্যবহারকারীকে একটি সিদ্ধান্ত নিতে প্রম্পট করতে ব্যবহৃত হয়, যেমন "আপনি কি ডিলিট করতে চান?" বা "আপনি কি সেভ করতে চান?"।
এখানে ExtJS তে Modal Dialog এবং Confirmation Boxes তৈরি করার পদ্ধতি দেখানো হবে।
Modal Dialog হলো এমন একটি ডায়ালগ বক্স যা অ্যাপ্লিকেশনের অন্যান্য অংশের উপর লেগে থাকে, অর্থাৎ, এটি যখন পর্যন্ত বন্ধ না করা হয়, তখন পর্যন্ত ব্যবহারকারী অন্য কোনো কার্যক্রম করতে পারে না। এটি সাধারণত গুরুত্বপূর্ণ মেসেজ বা ফর্ম উপস্থাপনের জন্য ব্যবহৃত হয়।
উদাহরণ:
Ext.create('Ext.window.Window', {
title: 'Modal Dialog Example',
width: 300,
height: 200,
layout: 'fit',
modal: true, // Modal dialog
items: {
xtype: 'panel',
html: 'This is a modal dialog. Please interact with it!'
},
buttons: [
{
text: 'OK',
handler: function() {
Ext.Msg.alert('Action', 'You clicked OK!');
}
},
{
text: 'Cancel',
handler: function() {
Ext.Msg.alert('Action', 'You clicked Cancel!');
}
}
]
}).show();
কী কোড বুঝানো হচ্ছে:
modal: true: এটি ডায়ালগ বক্সকে মোডাল বানায়, অর্থাৎ ইউজার অন্য কিছু করতে পারবে না যতক্ষণ না তারা ডায়ালগ বক্সটি বন্ধ করে।buttons: এখানে দুইটি বাটন দেওয়া হয়েছে, একটির মাধ্যমে OK ক্লিক করলে একটি মেসেজ প্রদর্শিত হবে এবং অন্যটির মাধ্যমে Cancel ক্লিক করলে আরেকটি মেসেজ প্রদর্শিত হবে।layout: 'fit': এটি ডায়ালগ বক্সের মধ্যে একটি প্যানেল ফিট করে।Confirmation Box হল একটি ডায়ালগ বক্স যা সাধারণত ব্যবহারকারীকে একটি ক্রিয়া বা সিদ্ধান্ত নিতে প্রম্পট করে। যেমন: "আপনি কি নিশ্চিত যে আপনি এই তথ্য মুছে ফেলতে চান?"
উদাহরণ:
Ext.Msg.confirm('Confirm', 'Are you sure you want to delete this item?', function(choice) {
if (choice === 'yes') {
Ext.Msg.alert('Action', 'Item deleted!');
} else {
Ext.Msg.alert('Action', 'Item not deleted!');
}
});
কী কোড বুঝানো হচ্ছে:
Ext.Msg.confirm: এটি একটি কনফার্মেশন বক্স তৈরি করে যা দুটি অপশন (Yes/No) প্রদর্শন করে।choice === 'yes': এখানে, যদি ব্যবহারকারী 'Yes' বাটন ক্লিক করেন, তবে একটি মেসেজ "Item deleted!" দেখানো হবে, আর যদি 'No' ক্লিক করেন, তবে "Item not deleted!" দেখানো হবে।Ext.Msg.alert: এটি সাধারণ একটি মেসেজ ডায়ালগ তৈরি করে যা ব্যবহারকারীকে দেখানো হয়।একটি সাধারণ মেসেজ বক্স যা ইউজারকে তথ্য দেখায়।
উদাহরণ:
Ext.Msg.alert('Information', 'This is an information message!');
এটি একটি ত্রুটি বার্তা প্রদর্শন করার জন্য ব্যবহৃত হয়।
উদাহরণ:
Ext.Msg.alert('Error', 'An error occurred while processing your request.');
এটি সতর্কবার্তা (Warning) প্রদর্শন করে।
উদাহরণ:
Ext.Msg.alert('Warning', 'Are you sure you want to continue?');
| Feature | Modal Dialog | Confirmation Box |
|---|---|---|
| Purpose | ব্যবহারকারীকে গুরুত্বপূর্ণ তথ্য বা ফর্ম উপস্থাপন করা | ব্যবহারকারী থেকে একটি সিদ্ধান্ত নেওয়া (Yes/No) |
| Blocking | হ্যাঁ, ইউজারকে অন্য কোনো কার্যক্রম করতে বাধা দেয় | না, ইউজার অন্য কিছু করতে পারবে |
| Use Case | তথ্য ফর্ম বা মেসেজ প্রদর্শন | ডিলিট, সেভ, বা অন্য কোনো কার্যক্রমের জন্য নিশ্চিতকরণ |
| UI | একটি উইন্ডো বা প্যানেল | একটি প্রম্পট ডায়ালগ (Yes/No Options) |
ExtJS এ Modal Dialog এবং Confirmation Boxes তৈরি করা খুবই সহজ এবং অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে। এগুলি সাধারণত ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন এবং সিদ্ধান্ত গ্রহণে সহায়তা করে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
